import React, { Component } from 'react'
import {
  Grid, Image, Segment, Button, Statistic, Table, Header, Icon,
} from 'semantic-ui-react'
import { Card } from 'components/dashboard'
import { formatBytes } from 'utils/func'
import Pie from './pieChart'
import Line from './lineChart'

export default class HomePage extends Component {
  render() {
    const { dashboard } = this.props
    const { org_view, user, project } = dashboard
    const {
      datasets, size, files, members, projects,
    } = org_view[0]
    const totalSize = user[0].info_object.storage_space
    const avSize = totalSize - size
    return (
      <Grid style={{ width: '100%', padding: '1em' }}>
        <Grid.Row>
          <Grid.Column width={16}>
            <Grid>
              <Grid.Row columns={5}>
                <Grid.Column>
                  <Card icon="database" title="数据集" number={datasets} />
                </Grid.Column>
                <Grid.Column>
                  <Card icon="tasks" title="项目" number={projects} />
                </Grid.Column>
                <Grid.Column>
                  <Card icon="disk" title="已用空间" number={formatBytes(size)} />
                </Grid.Column>
                <Grid.Column>
                  <Card icon="file" title="样本文件" number={files} />
                </Grid.Column>
                <Grid.Column>
                  <Card icon="users" title="成员" number={members} />
                </Grid.Column>
              </Grid.Row>
              <Grid.Row columns={2}>
                <Grid.Column>
                  <Segment textAlign="center">
                    <Header as="h3" icon>
                      存储空间使用情况
                    </Header>
                    <div>
                      <Pie
                        data={[
                          { name: '未使用', value: avSize, fill: '#21ba45' },
                          { name: '已完成', value: size },
                        ]}
                      />
                    </div>
                  </Segment>
                </Grid.Column>
                <Grid.Column>
                  <Segment textAlign="center">
                    <Header as="h3" icon>
                      项目进度
                    </Header>
                    <div>
                      <Line data={project} />
                    </div>
                  </Segment>
                </Grid.Column>
              </Grid.Row>
            </Grid>
          </Grid.Column>
        </Grid.Row>
      </Grid>
    )
  }
}
